<template>
	<view>
		<view class="body_top">
			<view class="search_box">
				<image class="search" src="../../../static/jingjie/search.png" mode=""></image>
				<view class="search_box_rigt">
					<input type="text" value="" placeholder="输入搜索内容" @input="searchFor" />
					<image class="delete" src="../../../static/index/delete.png" mode=""></image>
				</view>

			</view>
			<text @tap="back()">取消</text>
		</view>
		<view class="history">
			<view class="history_top">
				<text>历史搜索</text>
				<image @tap="deleteHistory" src="../../../static/jingyou/delete1.png" mode=""></image>
			</view>
			<view class="history_item">
				<image class="item_left" src="../../../static/jingyou/tiem.png" mode=""></image>
				<view class="item_right">
					<text>印度飞饼</text>
					<image src="../../../static/jingjie/delete_h.png" mode="" @tap="dianji"></image>
				</view>
			</view>
			<view class="history_item">
				<image class="item_left" src="../../../static/jingyou/tiem.png" mode="" ></image>
				<view class="item_right">
					<text>非洲人吃火锅</text>
					<image src="../../../static/jingjie/delete_h.png" mode="" @tap="dianji"></image>
				</view>
			</view>
			<view class="history_item">
				<image class="item_left" src="../../../static/jingyou/tiem.png" mode=""></image>
				<view class="item_right">
					<text>印度飞饼</text>
					<image src="../../../static/jingjie/delete_h.png" mode="" @tap="dianji"></image>
				</view>
			</view>
		</view>
		<view>
			<view></view>
			<view></view>
		</view>
		<mask :isShowMask='isShowMask' @closeMask='closeMask'></mask>
		<!-- <view class="poeple_box">
			<view class="title_box">
				境友
			</view>
			<view class="people_item">
				<view class="headImg_box">
					<image class="headImg" src="../../../static/avatar.jpg" mode=""></image>
					<image class="country" src="../../../static/meiguo.png" mode=""></image>
				</view>
				<view class="text_box">
					<text class="text1">#一个棒棒糖</text>
					<text class="text2">中国大陆</text>
				</view>
			</view>
		</view>
		<view class="group_box">
			<view class="title_box">
				群聊
			</view>
			<view class="group_item">
				<view class="five_image image_box">
					<image class="five_mid_image" src="../../../static/avatar.jpg" mode=""></image>
					<image src="../../../static/avatar.jpg" mode=""></image>
					<image src="../../../static/avatar.jpg" mode=""></image>
					<image src="../../../static/avatar.jpg" mode=""></image>
					<image src="../../../static/avatar.jpg" mode=""></image>
				</view>
				<view class="">
					重新出发
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	import mask from '../../../components/mask.vue' 
	export default {
		data() {
			return {
				historyList:[],
				isShowMask: false,
				isShow: false,
			};
		},
		components: {
			mask
		},
		onLoad(){
			
		},
		methods: {
			dianji(){
				console.log(2);

			},
			toAdd() {

				this.isShow = true
				this.isShowMask = true
			},
			closeMask() {
				this.isShow = false
				this.isShowMask = false
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			deleteHistory(){

				this.historyList=''
				this.toAdd()
			}
		},
	}
</script>

<style scoped>
	.body_top {
		display: flex;
		padding: 0 24upx;
		margin-top: 50upx;
		justify-content: space-between;
		align-items: center;
		position: 1;
	}

	.body_top text {
		color: #46CECF;
		font-size: 32upx;
	}

	.search_box {
		display: flex;
		align-items: center;
		background: #FFFFFF;
		width: 580upx;
		height: 64upx;
		border: 1upx solid #E6E6E6;
		border-radius: 64upx;
		padding: 0 22upx;
		margin-bottom: 20upx;
	}

	.search_box input {
		width: 480upx;
		font-size: 32upx;
	}

	.search_box_rigt {
		display: flex;
		justify-content: space-between;
		width: 100%;
		align-items: center;
	}

	.search {
		width: 28upx;
		height: 28upx;
		margin-right: 10upx;
	}

	.delete {
		width: 32upx;
		height: 32upx;
	}

	.poeple_box {
		background: #FFFFFF;

	}

	.title_box {
		background: #FFFFFF;
		color: #666666;
		font-size: 28upx;
		padding: 20upx 24upx;
		border-bottom: 1upx solid #E6E6E6;
	}

	.people_item {
		padding: 24upx 24upx;
		display: flex;
		border-bottom: 1upx solid #E6E6E6;
		align-items: center;
	}

	.headImg_box {
		position: relative;
		margin-right: 26upx;
	}

	.headImg {
		width: 106upx;
		height: 106upx;
		border-radius: 50%;
		overflow: hidden;
	}

	.country {
		width: 36upx;
		height: 36upx;
		position: absolute;
		bottom: 10upx;
		left: 0upx;
	}

	.text_box {
		display: flex;
		flex-direction: column;
	}

	.text1 {
		color: #333333;
		font-size: 32upx;
	}

	.text2 {
		color: #999999;
		font-size: 26upx;
		padding-top: 14upx;
	}

	.group_box {
		margin-top: 20upx;
		background: #FFFFFF;
	}

	.group_item {
		background: #FFFFFF;
		display: flex;
		align-items: center;
		padding: 34upx 24upx;
		position: relative;
		border-bottom: 1upx solid #E6E6E6;
		font-size: 32upx;
		color: #333333;
	}

	.group_item image {
		width: 46upx;
		height: 46upx;
		border-radius: 50%;
		overflow: hidden;
	}

	.image_box {
		width: 92upx;
		height: 92upx;
		display: flex;
		flex-wrap: wrap;
		position: relative;
		margin-right: 44upx;
	}

	.there_mid_image {
		position: absolute;
		left: 23upx;
		top: 49upx;
	}

	.five_mid_image {
		position: absolute;
		left: 23upx;
		top: 26upx;
	}

	.history {
		background: #FFFFFF;
	}

	.history_top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 24upx 24upx;
		color: #333333;
		font-size: 32upx;
		font-weight: bold;
	}

	.history_top image {
		width: 24upx;
		height: 24upx;
	}

	.history_item {
		display: flex;
		align-items: center;
		padding: 24upx 24upx;
		border-bottom: 1upx solid #E6E6E6;
		color: #333333;
		font-size: 32upx;
	}

	.item_left {
		width: 32upx;
		height: 32upx;
		margin-right: 30upx;
	}

	.item_right {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.item_right image {
		width: 24upx;
		height: 24upx;
	}
</style>
